<script setup lang="ts">
import ChildComponent from './ChildComponent.vue';
import {ref} from "vue";

// 父组件的状态
const parentMessage = ref('Hello from Parent');

// 接收子组件传递的值
const handleChildMessage = (message: string) => {
  console.log('Message from child:', message);
  parentMessage.value = message;
};
</script>

<template>
  <div>
    <h1>Parent Component</h1>
    <p>Parent message: {{ parentMessage }}</p>
    <ChildComponent
        :parent-message="parentMessage"
        @child-message="handleChildMessage"
    />
  </div>
</template>

<style scoped>

</style>
